$primary=#e94a25
$secondary=#1aa854
$blue=#3682a3
$purple=#9b4fb0

html a:link,
body a:link
  text-decoration: none
  color: inherit

html a:visited,
body a:visited
  color: white

@media screen and (max-width:600px)
  #landing__menu
    max-width: 100vw

  #info
    grid-template-rows: 1fr

  .menu
    max-width: 100vw
    border-radius: 0

  .tech *
    grid-column: 1/6

@media screen and (max-width:1200px)
  em
    display: none



.features--current i
  color: $secondary

.features--incoming i
  color: #bbb


#landing
  display: grid
  align-content: center
  justify-content: center
  height: 100vh
  text-align: center
  background: linear-gradient(#37b96c77, #37b96c88),url("/assets/img/background.jpg") no-repeat
  background-size: cover

#landing__menu
  background-color: #ebf9f1bb
  padding: 2em 8em
  border-radius: 20px

#landing__menu img
  max-height: 35vh

#info
  display: grid
  grid-template-rows: 3fr 2fr
  height: 100vh
  text-align: center
  /*background-color:#ebf9f1;*/
  background-color: whitesmoke
  color: black

#tech
  display: grid
  align-content: center
  justify-content: center
  /*background-color: #59CC87;*/
  // background-color: #7d8186

#about
  padding: 3em
  // display: grid
  // align-items: center

.how-to__icon
// .about__icon
  color: $secondary

.red
  color: $primary

p.title
  font-size: 2.5em
  color: #1aa854
  font-weight: bold

p.title b
  color: #e94a25
  font-weight: bolder

.view.dark
  background-color: lightgrey

.menu
  display: grid
  grid-template-rows: 1fr 1fr 1fr
  align-items: center
  width: 25vw

.menu__item,
.menu__button,
.menu__input
  display: block
  text-align: center
  border: none
  width: 100%
  padding: 8px
  margin: 5px auto
  border-radius: 30px

.menu__button
  background-color: #ff6e4c

.menu__button:hover
  background-color: #e94a25

.menu__button--blue
  @extends .menu__button
  background-color: lightness($purple, 50%)

.menu__button--blue:hover
  background-color: lightness($purple, 25%)

.menu__input
  background-color: #37b96c

.menu__input:hover
  background-color: #1aa854

.tech
  color: whitesmoke
  display: grid
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr
  grid-gap: .5em
  padding: 1em

#konrad
  --tech-color: #ee3555

#mikolaj
  --tech-color: #593b97

#danegov
  --tech-color: #465aa8

#googlemaps
  --tech-color: #18d68c

#gitlab
  --tech-color: #f5834e

#start
  --tech-color: #e94a25

.tech__field
  text-align: center
  align-content: center
  padding: 0

.tech__field>*
  text-align: center
  padding: 10px
  margin: 0

.tech__field>i
  display: grid
  margin: auto
  align-content: center
  justify-content: center
  width: 2em
  height: 2em
  font-size: 3em
  border-radius: 100%
  color: #ebf9f1
  background-color: var(--tech-color)

.tech__button
  display: block
  text-align: center
  border: none
  width: 100%
  padding: 8px
  margin: 5px auto
  border-radius: 30px
  width: 66.66666667%
  color: var(--tech-color)
  transition: .66666667s background-color

.tech__button:hover
  background-color: var(--tech-color)
  color: #ebf9f1
